<div th:replace="~{ app :: layout ('博客详情', ~{::#css}, ~{::#main}, ~{::#js}) }" xmlns:th="http://www.thymeleaf.org">

    <div id="css">
        <link rel="stylesheet" href="/build/assets/backend.css">
        <style>
            .cherry {
                height: unset;
                /*box-shadow: none;*/
            }
            .cherry-markdown a.anchor:before {
                content: "";
            }
            .cherry-markdown img {
                max-width: 100% !important;
            }
            .cherry-markdown video {
                max-width: 100% !important;
            }
        </style>
    </div>

    <main id="main" class="my-2rem">
        <article class="blog-show container">
            <div class="row">
                <div class="col">
                    <h1 th:text="${blog.title}">maven 加速，修改镜像源</h1>
                    <p class="meta text-muted mb-2rem"><a href="#">admin</a> - <i th:text="${#temporals.format(blog.created_at, 'yyyy-MM-dd HH:mm:ss')}"></i></p>
                    <div th:data-content="${blog.content}" id="blog-content">
                    </div>
                </div>
            </div>
        </article>
    </main>

    <div id="js">
        <script type="module" src="/build/assets/backend.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const cherry = new Cherry({
                    id: 'blog-content',
                    value: document.getElementById('blog-content').dataset.content,
                    editor: {
                        defaultModel: 'previewOnly',
                    },
                    toolbars: {
                        // 打开侧边目录
                        toc: {
                            updateLocationHash: true,
                            defaultModel: 'pure',
                            position: 'fixed',
                        },
                    },
                    previewer: {
                        enablePreviewerBubble: false,
                    }
                });
            });
        </script>
    </div>

</div>


